<template>
    <div class="styles">
        <ul>
            <li @click="onClickStyle(-1, 0)" :class="{ active: 0 === currentStyleIndex }">全部</li>
            <li v-for="(item, index) in styles" :key="index" :class="{ active: index + 1 === currentStyleIndex }"
                @click="onClickStyle(item.id, index)">{{ item.name }}</li>
        </ul>
    </div>
    <div class="collapse" v-show="!toggleStatus">
        <div class="areas">
            <ul>
                <li @click="onClickArea(-1, 0)" :class="{ active: 0 === currentAreaIndex }">全部</li>
                <li v-for="(item, index) in areas" :key="index" :class="{ active: index + 1 === currentAreaIndex }"
                    @click="onClickArea(item.id, index)">{{ item.name }}</li>
            </ul>
        </div>
        <div class="status">
            <ul>
                <li @click="onClickStatus(-1, 0)" :class="{ active: 0 === currentStatusIndex }">全部</li>
                <li v-for="(item, index) in status" :key="index" :class="{ active: index + 1 === currentStatusIndex }"
                    @click="onClickStatus(item.id, index)">{{ item.name }}</li>
            </ul>
        </div>
        <div class="prices">
            <ul>
                <li @click="onClickPrice(-1, 0)" :class="{ active: 0 === currentPriceIndex }">全部</li>
                <li v-for="(item, index) in prices" :key="index" :class="{ active: index + 1 === currentPriceIndex }"
                    @click="onClickPrice(item.id, index)">{{ item.name }}</li>
            </ul>
        </div>
    </div>
    <div class="orders">
        <ul>
            <li v-for="(item, index) in orders" :key="index" :class="{ active: index === currentOrderIndex }"
                @click="onClickOrder(item.id, index)">{{ item.name }}</li>
        </ul>
        <div class="toggle" @click="toggleStatus = !toggleStatus"> <van-icon :name="toggleIcon" /> <span
                style="margin-left: 5px;">筛选</span> </div>
    </div>
    <div class="special">
        <ul>
            <li v-for="(item, index) in special" :key="index" :class="{ active: index === currentSpecialIndex }"
                @click="onClickSpecial(item.id, index)">{{ item.name }}</li>
        </ul>
    </div>

    <List :style_id="style_id" :area_id="area_id" :status_id="status_id" :price_id="price_id" :order_id="order_id"
        :special_id="special_id"></List>

</template>
<script setup>

import List from "@/components/category/List.vue"

import { fetchCategory } from "@/api/index.js";
import { ref, onMounted, useTemplateRef, computed } from "vue";
const styles = ref([])
const areas = ref([])
const status = ref([])
const prices = ref([])
const orders = ref([])
const special = ref([])

const style_id = ref(-1)
const area_id = ref(-1)
const status_id = ref(-1)
const price_id = ref(-1)
const order_id = ref(0)
const special_id = ref()

// 当前点击 高亮的索引
const currentStyleIndex = ref(0)
const currentAreaIndex = ref(0)
const currentStatusIndex = ref(0)
const currentPriceIndex = ref(0)
const currentOrderIndex = ref(0)
const currentSpecialIndex = ref()






const toggleStatus = ref(true) // 收起来状态

const toggleIcon = computed(() => {

    return toggleStatus.value ? 'arrow-down' : 'arrow-up'

})



onMounted(() => {
    //读取分类数据
    getCategory()
})
const getCategory = async () => {
    const { data } = await fetchCategory()
    // console.log(data)
    styles.value = data.styles
    areas.value = data.areas
    status.value = data.status
    prices.value = data.prices
    orders.value = data.orders
    special.value = data.special
};

const onClickStyle = (id, index) => {
    console.log('参数：', id)
    style_id.value = id
    currentStyleIndex.value = index + 1
}


const onClickArea = (id, index) => {
    console.log('参数：', id)
    area_id.value = id
    currentAreaIndex.value = index + 1
}


const onClickStatus = (id, index) => {
    console.log('参数：', id)
    status_id.value = id
    currentStatusIndex.value = index + 1
}

const onClickPrice = (id, index) => {
    console.log('参数：', id)
    price_id.value = id
    currentPriceIndex.value = index + 1
}

const onClickOrder = (id, index) => {
    console.log('参数：', id)
    order_id.value = id
    currentOrderIndex.value = index
}

const onClickSpecial = (id, index) => {
    console.log('参数：', id)
    special_id.value = id
    currentSpecialIndex.value = index
}


</script>
<style scoped lang="scss">
.styles {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin: 20px 10px 10px 10px;
        border-bottom: 1px solid #eee;

        li {
            list-style: none;
            font-size: 12px;
            color: #6c727e;
            margin: 10px;


        }

        .active {
            color: #fb7299;
        }
    }
}

.areas {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin: 10px;

        li {
            list-style: none;
            font-size: 12px;
            color: #6c727e;
            margin: 10px;


        }

        .active {
            color: #fb7299;
        }
    }
}

.status {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin: 10px;

        li {
            list-style: none;
            font-size: 12px;
            color: #6c727e;
            margin: 10px;


        }

        .active {
            color: #fb7299;
        }
    }
}

.prices {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin: 10px;

        li {
            list-style: none;
            font-size: 12px;
            color: #6c727e;
            margin: 10px;


        }

        .active {
            color: #fb7299;
        }
    }
}

.orders {
    display: flex;
    align-items: center;
    width: 100%;
    // margin: 10px 0;

    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex: 1;
        margin-left: 10px;

        li {
            list-style: none;
            font-size: 12px;
            color: #6c727e;
            margin: 10px;


        }

        .active {
            color: #fb7299;
        }
    }

    .toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #6c727e;
        padding: 5px 10px;
        // border: 1px solid #eee;
        // border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
        margin-right: 10px;
    }
}

.special {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin: 0 10px 20px 10px;

        li {
            list-style: none;
            font-size: 12px;
            color: #6c727e;
            margin: 10px;
        }

        .active {
            color: #fb7299;
        }
    }
}
</style>